<template>
  <div class="createdorder">
    <div class="contentView">
      <div class="herdertop">
        <img src="../../assets/top.png" alt="" class="topImg" />
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          <el-breadcrumb-item>代客录单</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="contentBox" style="width: 95%;overflow: hidden;">
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="125px" label-position="left">
          <el-form-item label="选择商品：" prop="chooseGoodsCode">
            <el-select v-model="ruleForm.chooseGoodsCode" placeholder="请选择" clearable>
              <el-option v-for="item in goodsOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择规格：" class="chooseGuige" prop="skuId">
            <el-radio-group v-model="ruleForm.skuId">
              <el-radio-button label="1">北京</el-radio-button>
              <el-radio-button label="2">上海</el-radio-button>
              <el-radio-button label="3">广州</el-radio-button>
              <el-radio-button label="4">深圳</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系人姓名：" class="nameInput" prop="contactName">
            <el-input v-model="ruleForm.contactName" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系人手机号：" class="phoneInput" prop="contactPhone">
            <el-input v-model="ruleForm.contactPhone" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>
          <el-form-item label="服务地址：" class="serveAddress" prop="serveAddress">
            <el-select v-model="ruleForm.provinceCode" placeholder="请选择省份" clearable>
              <el-option v-for="item in provinceOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="ruleForm.cityCode" placeholder="请选择城市" clearable>
              <el-option v-for="item in cityOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="ruleForm.areaCode" placeholder="请选择区域" clearable>
              <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-input v-model="ruleForm.detailAddress" clearable placeholder="请输入正确地址，精确到门牌号" class="addressInput"></el-input>
            <el-button style="margin-left:20px;color: #fff;background-color:#ff7f4c;" @click="validation(ruleForm)">验证地址</el-button>
          </el-form-item>
          <el-form-item label="选择派单方式：" class="chooseGuige" prop="sendOrderType">
            <el-radio-group v-model="ruleForm.sendOrderType">
              <el-radio-button label="1">系统自动派单</el-radio-button>
              <el-radio-button label="2">人工手动派单</el-radio-button>
            </el-radio-group>
            <el-checkbox v-model="ruleForm.noMoneychecked" disabled>服务免单，无需支付</el-checkbox>
          </el-form-item>
          <el-form-item label="订单备注：" class="orderInFo">
            <el-input type="textarea" v-model="ruleForm.orderTip" placeholder="请输入订单备注"></el-input>
          </el-form-item>
          <el-form-item label-width="0px" class="chooseTime">
            <div style="display:flex;align-items:center;justify-content: flex-start;">
              <div><span style="color:red;margin-right:3px">*</span>选择预约时间：</div>
              <div class="month">
                <div style="cursor:pointer;margin-right:8px;" @click="monthPrev">
                  <i class="el-icon-arrow-left"></i>
                </div>
                <div class="weekdate">
                  {{ `${moment(monthstarttime).format("YYYY-MM")}` }}
                </div>
                <div style="cursor:pointer;margin-left:8px;" @click="monthNext">
                  <i class="el-icon-arrow-right"></i>
                </div>
                <div style="cursor: pointer;color: #ff7f4c;margin-left:20px;" @click="goBackCurrent">回到本月</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label-width="0px" prop="month">
            <el-table :data="tableData" border style="width:100%;" :cell-class-name="changeTrStyle" @cell-click="cellClick" class="table" ref="table" id="tableId" highlight-current-row>
              <el-table-column v-for="(item, index) in tableData[0].allStaffSchedulingVoList" :key="index" :label="item.day" show-overflow-tooltip width="40">
                <template slot-scope="scope">
                  <div v-if="scope.row.allStaffSchedulingVoList[index].staffStatus == 1">
                    <a-checkbox></a-checkbox>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label-width="0px" prop="time" style="margin-top:35px;">
            <el-button type="">8:00-10:00</el-button>
            <el-button type="">12:00-14:00</el-button>
            <el-button type="">17:00-19:00</el-button>
          </el-form-item>
          <el-form-item label-width="0px" prop="imgs">
            <!-- 保洁技师选择列表 -->
            <div class="staffList">
              <div class="staffItem" v-for="(item,index) in staffList" :key="index" @click="chooseStaffPeople(item)" :class="{ activeStaff: item.staffCode === chooseStaffCode}">
                <div class="overLay"></div>
                <div class="imgBox">
                  <img :src="item.staffImg" />
                </div>
                <div class="text">
                  <span>{{item.staffName}}</span>
                  <span>|</span>
                  <span>{{item.staffRate}}</span>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item style="float: right;margin-right:10px;">
            <el-button @click="cancel">取消</el-button>
            <el-button style="color: #fff;background-color:#ff7f4c;" @click="submitForm('ruleForm',ruleForm)">立即录单</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>该笔免单服务已成功录单~</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="noder">查看订单</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getCurrMonthDays } from "./utils";
import { tableData, staffList } from './mockData'
import moment from "moment";
export default {
  data () {
    var validatorPhone = function (rule, value, callback) {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        chooseGoodsCode: '', // 商品id
        skuId: '', // 商品规格
        contactName: '', // 联系人姓名
        contactPhone: '', // 联系人手机号
        time: '',//时间区间
        month: '',//月份
        imgs: '',//员工
        serveAddress: '',
        provinceCode: '', // 省code
        cityCode: '', // 城市code
        areaCode: '', // 区域code
        detailAddress: '', // 详细地址
        sendOrderType: '', // 派单方式
        noMoneychecked: true, // 免单选择
        orderTip: '', // 订单备注
      },
      dialogVisible: false,
      monthstarttime: '',
      monthendtime: '',
      goodsOptions: [
        {
          value: '1',
          label: '测试'
        }
      ],
      provinceOptions: [
        {
          value: '1',
          label: '测试'
        }
      ],
      cityOptions: [
        {
          value: '1',
          label: '测试'
        }
      ],
      areaOptions: [
        {
          value: '1',
          label: '测试'
        }
      ],
      tableData: [
        {
          allStaffSchedulingVoList: []
        }
      ],
      staffList: [
        {
          staffCode: '',
          staffName: '',
          staffRate: ''
        }
      ],
      rules: {
        chooseGoodsCode: [
          { required: true, message: '请选择商品', trigger: 'blur' }
        ],
        skuId: [
          { required: true, message: '请选择规格', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择时间区间', trigger: 'blur' }
        ],
        imgs: [
          { required: true, message: '请选择员工', trigger: 'blur' }
        ],
        month: [
          { required: true, message: '请勾选月份', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '请填写联系人姓名', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, validator: validatorPhone, trigger: 'blur' }
        ],
        serveAddress: [
          { required: true, message: '请选择服务地址', trigger: 'blur' }
        ],
        sendOrderType: [
          { required: true, message: '请选择派单方式', trigger: 'blur' }
        ],
      },
      chooseStaffCode: '', // 选择的保洁技师
    }
  },
  methods: {
    // 上一月
    monthPrev () {
      const monthstarttime = moment(new Date(this.monthstarttime))
        .subtract(1, "months")
        .startOf("month")
        .format("YYYY-MM-DD");
      const monthendtime = moment(new Date(this.monthendtime))
        .subtract(1, "months")
        .endOf("month")
        .format("YYYY-MM-DD");
      this.monthstarttime = monthstarttime
      this.monthendtime = monthendtime
    },
    // 下一月
    monthNext () {
      const monthstarttime = moment(new Date(this.monthstarttime))
        .add(1, "months")
        .startOf("month")
        .format("YYYY-MM-DD");
      const monthendtime = moment(new Date(this.monthendtime))
        .add(1, "months")
        .endOf("month")
        .format("YYYY-MM-DD");
      this.monthstarttime = monthstarttime
      this.monthendtime = monthendtime
    },
    // 回到本月
    goBackCurrent () {
      const { monthstarttime, monthendtime } = getCurrMonthDays();
      this.monthstarttime = monthstarttime;
      this.monthendtime = monthendtime;
    },
    // 获取table数据
    getTableData () {
      this.tableData = tableData
    },
    changeTrStyle () { },
    cellClick () { },
    // 选择保洁服务技师
    chooseStaffPeople (item) {
      this.chooseStaffCode = item.staffCode
    },
    // 验证地址
    validation (e) {
      console.log(e)
      if (e.provinceCode == '') {
        this.$message.error('请选择省份');
      } else if (e.cityCode == '') {
        this.$message.error('请选择城市');
      } else if (e.areaCode == '') {
        this.$message.error('请选择区域');
      } else if (e.detailAddress == '') {
        this.$message.error('请输入正确地址，精确到门牌号');
      } else {
        this.$message({
          message: '验证地址成功',
          type: 'success'
        });
      }
    },
    //关闭事件
    handleClose () {
      this.dialogVisible = false
    },
    // 立即录单
    submitForm (ruleForm, e) {
      console.log(e)
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.dialogVisible = true
        } else {
          return false;
        }
      });
    },
    // 取消
    cancel () {
      this.$router.push({
        path: "/ordersList"
      });
    },
    //查看订单
    noder () {
      this.$router.push({
        path: "/orderdetails",
        // query: {
        //   orderNo: orderNo
        // }
      });
      this.dialogVisible = false
    },
  },
  activated () {
    const { monthstarttime, monthendtime } = getCurrMonthDays();
    this.monthstarttime = monthstarttime;
    this.monthendtime = monthendtime;
    this.getTableData()
    // 暂定
    this.staffList = staffList
  }
}
</script>

<style lang="scss" scoped>
.contentView {
  padding-right: 20px;
  padding-left: 20px;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  .topImg {
    margin-right: 20px;
  }
}
.contentBox {
  padding: 15px 20px;
  border: 10px solid #ebeef1;
  border-radius: 10px;
}
/deep/ .chooseGuige {
  .el-radio-group {
    border-radius: 0;
  }
  .el-radio-button {
    margin-right: 10px;
    :first-child {
      .el-radio-button__inner {
        border-left: none;
        border-radius: none;
      }
    }
  }
  .el-radio-button__inner {
    border-radius: 4px;
    border-left: 1px solid #dcdfe6;
  }
}
/deep/ .nameInput {
  .el-input {
    width: 230px;
  }
  .el-input__inner {
    width: 230px;
  }
}
/deep/ .phoneInput {
  .el-input {
    width: 230px;
  }
  .el-input__inner {
    width: 230px;
  }
}
/deep/ .serveAddress {
  .el-input__inner {
    width: 120px;
  }
}
/deep/ .addressInput {
  display: inline-block;
  width: 300px;
  .el-input__inner {
    width: 300px;
  }
}
/deep/ .orderInFo {
  width: 500px;
  .el-textarea__inner {
    min-height: 300px;
  }
}
.chooseTime {
  font-size: 14px;
  color: #606266;
  .month {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}
</style>
<style lang="scss" scoped>
/deep/ .cell.el-tooltip {
  padding-left: 0 !important;
  min-width: 40px;
  padding-right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/ .el-table th {
  padding: 8px 0;
}
/deep/ .el-table td {
  padding: 8px 0;
}
.staffList {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.staffItem {
  margin-right: 20px;
  margin-bottom: 20px;
  position: relative;
  .overLay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #fff, $alpha: 0.7);
    z-index: 100;
    left: 0;
    top: 0;
  }
  .imgBox {
    width: 84px;
    height: 84px;
    border: 8px solid #cccccc;
    border-radius: 4px;
    img {
      width: 100%;
      height: 100%;
      display: inline-block;
    }
  }
  .text {
    margin-top: 8px;
    text-align: center;
  }
}
.activeStaff {
  .overLay {
    display: none;
  }
}
</style>
